import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { useState } from 'react';
import { useEffect } from 'react';
import { queryDetail, deleteQuestionComment } from '@/services/question';
import { Button, Row, Col, Card, Descriptions, Table, Popconfirm } from 'antd';
function Detail ( props ) {

    const [ articId, setArticId ] = useState( window.location.search.substr( 1 ).split( '=' )[ 1 ] );
    const [ articleDetail, setArticleDetail ] = useState( {} );

    //|--------获取数据
    useEffect( () => {
        handleQueryDetail();
    }, [] );
    //|---------获取详情
    const handleQueryDetail = async () => {
        const payload = {
            id: articId
        };
        console.log( payload );
        const res = await queryDetail( payload );
        setArticleDetail( res.data );
    };
    //|---------删除评论
    const handleDeleteAnswer = async ( id ) => {
        const payload = {
            articId,
            id
        };
        const res = await deleteQuestionComment( payload );
        handleQueryDetail();
    };
    //|----------表格定义
    const columns = [
        {
            title: "评论者",
            dataIndex: "nickName",
            key: "nickName"
        },
        {
            title: "内容",
            dataIndex: "content",
            key: "content"
        },
        {
            title: "操作",
            dataIndex: "action",
            key: "action",
            render: ( text, record ) => {
                return (
                    <div>
                        <Popconfirm onConfirm={ () => handleDeleteAnswer( record._id ) }>
                            <Button type="link" style={ { color: "red" } }>删除</Button>
                        </Popconfirm>
                    </div>
                );
            }
        }
    ];
    return (
        <PageHeaderWrapper
            title={
                <Row style={ { paddingTop: "10px" } }>

                    <span style={ { fontSize: "16px" } }>{ articleDetail.title }</span>
                </Row> }
            content={
                <div style={ { paddingTop: "10px" } }>
                    <Descriptions size="small" column={ 6 }>
                        <Descriptions.Item label="创建人">{ articleDetail.author }</Descriptions.Item>
                        <Descriptions.Item label="创建时间">{ articleDetail.createdAt && articleDetail.createdAt.split( 'T' )[ 0 ] }</Descriptions.Item>
                    </Descriptions>
                    <Descriptions size="small" column={ 6 }>
                        <Descriptions.Item label="点赞数">{ articleDetail.fabMembers && articleDetail.fabMembers.length }</Descriptions.Item>
                        <Descriptions.Item label="评论数" >{ articleDetail.comments && articleDetail.comments.length }</Descriptions.Item>
                        <Descriptions.Item label="收藏数" >{ articleDetail.starMembers && articleDetail.starMembers.length }</Descriptions.Item>
                    </Descriptions>
                </div>
            }
        >
            <Card title="内容">
                <Row style={ { marginTop: "10px" } }>
                    <span style={ { fontSize: "14px", color: "#000000" } }>{ articleDetail.content }</span>
                </Row>
            </Card>
            <Card title="评论" style={ { marginTop: "10px" } }>
                <Table
                    dataSource={ articleDetail.userComments ? articleDetail.userComments : [] }
                    columns={ columns }
                />
            </Card>
        </PageHeaderWrapper >
    );
}
export default Detail;